<template>
  <normal-layout page-index="6-4">
    <div class="bodyDiv">
      <div class="left">
        <el-card style="width: 100%;height: 240px">
          <div slot="header" style="display: flex; justify-content: space-between">
            <h3>数据统计</h3>
          </div>
          <div style="display: flex; width: 100%;justify-content: space-around;margin-top: 10px">
            <div style=" ">
              <h3>总数</h3>
              <h1 style="color: #000000;font-size: 70px;">{{current}}</h1>
            </div>
            <div style="">
              <h3>在线</h3>
              <h1 style="color: rgba(183,235,143,0.83);font-size: 70px;">{{online}}</h1>
            </div>
            <div style="">
              <h3>离线</h3>
              <h1 style="color: #409eff;font-size: 70px;">{{offline}}</h1>
            </div>
          </div>
        </el-card>
        <el-card style="margin-top: 10px">
<!--          <div style="width: 100%;justify-content: center">
            <div>
              <p style="font-weight: bold;width: 100%;white-space: nowrap">在线离线统计:</p>
              <el-divider style="width: 100%"></el-divider>
            </div>
          </div>-->
          <h4 style="margin-left: 50px">在线离线统计</h4>
          <annual-pie :test-data="pieData" style="height: 250px;width:100%;margin-top: -30px;margin-bottom: -30px"></annual-pie>
        </el-card>
        <el-card style="margin-top: 10px">
          <h4 style="margin-left: 50px">车种数量统计</h4>
          <line-histogram style="width: 100%;height: 350px;margin-bottom: -40px;margin-top: 10px"></line-histogram>
        </el-card>
      </div>
      <div class="right">
        <el-card style="height: 100%">
          <div slot="header" style="display: flex; justify-content: space-between">
            <h3>车辆管理</h3>
          </div>
          <div style="display: flex; justify-content: space-between; padding: 10px;">
            <div>
              <el-select placeholder="选择车种"></el-select>
              <el-select placeholder="选择车型"></el-select>
            </div>
            <div>
              <el-button type="primary" icon="el-icon-arrow-right">检索</el-button>
              <el-button @click="trainVisible=true">添加车辆</el-button>
            </div>
          </div>
          <el-table :data="testData"
                    style="width: 100%;height: 700px;"
                    stripe
                    highlight-current-row
                    ref="tableList">
            <el-table-column label="车种" prop="class"></el-table-column>
            <el-table-column label="车型" prop="type"></el-table-column>
            <el-table-column label="车号" prop="id"></el-table-column>
            <el-table-column label="设备数量" prop="num"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="primary" size="small" @click="deviceVisible=true">接入新设备信息</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination></el-pagination>
        </el-card>
      </div>
      <el-dialog
        title="添加车辆信息"
        :modal-append-to-body="false"
        :visible.sync="trainVisible"
        width="30%"
        :before-close="handleTrainClose">
        <el-form>
          <el-form-item label="车种:" style="margin-left: 8%">
            <el-input style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item label="车型:" style="margin-left: 8%">
            <el-input style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item label="车号:" style="margin-left: 8%">
            <el-input style="width: 80%"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button-group>
              <el-button @click="trainVisible = false">取 消</el-button>
              <el-button type="primary" @click="trainVisible = false">确 定</el-button>
            </el-button-group>
          </div>
      </el-dialog>
      <el-dialog
        title="添加设备信息"
        :modal-append-to-body="false"
        :visible.sync="deviceVisible"
        width="30%"
        :before-close="handleTrainClose">
        <el-form>
          <el-form-item label="设备名称:" style="margin-left: 8%">
            <el-input style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item label="设备编号:" style="margin-left: 8%">
            <el-input style="width: 80%"></el-input>
          </el-form-item>
          <el-form-item label="设备位置:" style="margin-left: 8%">
            <el-input style="width: 80%"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button-group>
            <el-button @click="deviceVisible = false">取 消</el-button>
            <el-button type="primary" @click="deviceVisible = false">确 定</el-button>
          </el-button-group>
        </div>
      </el-dialog>
    </div>
  </normal-layout>
</template>

<script>
  import NormalLayout from "../../components/NormalLayout";
  import AnnualPie from "../../components/Charts/AnnualPie";
  import LineHistogram from "../../components/Charts/LineHistogram";
    export default {
      name: "Train",
      components:{LineHistogram, AnnualPie, NormalLayout},
      data(){
        return{
          current:39,
          online:23,
          offline:16,
          pieData:[
            {value: 1048, name: '离线'},
            {value: 735, name: '在线'},
          ],
          testData:[
            {
              class:'货车',
              type:'VS-23',
              id:'113565',
              num:'6'
            },
            {
              class:'货车',
              type:'BT-19',
              id:'156652',
              num:'12'
            },
            {
              class:'货车',
              type:'BD-35',
              id:'112568',
              num:'6'
            },
          ],
          /*添加车辆信息和添加设备信息对话框默认*/
          trainVisible:false,
          deviceVisible:false,
        }
      },
      methods:{

      }
    }
</script>

<style scoped>
  .bodyDiv{
    margin: 10px;
    display: flex;
  }
  .left{
    width: 55%;
  }
  .right{
    width: 100%;
    margin-left: 10px;
  }
</style>
